<template>
    <div class="search">
        <!-- 搜索栏 -->
        <van-row class="row1">
			<van-col span="1"></van-col>
			<van-col span="3"><van-icon name="arrow-left" @click="backhome" /></van-col>
			<van-col span="16"><van-icon name="search" /><input type="text" v-model="searchmusic" placeholder="搜索音乐名"></van-col>
			<van-col @click="searchlist" span="3">搜索</van-col>
			<van-col span="1"></van-col>
		</van-row>

        <!-- 导航栏 -->
        <van-row class="row2">
			<van-col span="6"><van-icon name="friends-o" color="#ee0a24" @click="toartistlist" />歌手</van-col>
			<van-col span="6"><van-icon name="service-o"  color="#ee0a24"/>曲风</van-col>
			<van-col span="6"><van-icon name="music-o" color="#ee0a24"/>专区</van-col>
			<van-col span="6"><van-icon name="play-circle-o" color="#ee0a24"/>识曲</van-col>
		</van-row>

        <!-- 历史 -->
        <van-row class="row3">
			<van-col span="1"></van-col>
			<van-col span="4">历史</van-col>
			<van-col span="16"></van-col>
			<van-col span="2"><van-icon name="delete" /></van-col>
			<van-col span="1"></van-col>
		</van-row>
        <van-row class="row3list">
            <van-col span="1"></van-col>
			<van-col span="10">无所谓,我会出手</van-col>
			<van-col span="8"></van-col>
            <van-col span="1"></van-col>
		</van-row>
        
        <!-- 推荐 -->
        <van-row class="row4">
            <van-col span="1"></van-col>
			<van-col span="4">推荐</van-col>
			<van-col span="16"></van-col>
			<van-col span="2"><van-icon name="replay" /></van-col>
            <van-col span="1"></van-col>
		</van-row>
        <van-row class="row4list">
            <van-col span="1"></van-col>
			<van-col span="8">网恋靠谱吗</van-col>
			<van-col span="10">Do You Feel It</van-col>
            <van-col span="1"></van-col>
		</van-row>

        <!-- 榜单列表 -->
        <van-swipe class="my-swipe" :width="200" :loop="false" :show-indicators="false">
            <van-swipe-item>
                <h2>热搜榜</h2> 
                <van-list>
                        <van-cell v-for="item,index in list1" :key="index">
                            {{index + 1}} {{item.first}}
                        </van-cell>
                </van-list>
            </van-swipe-item>
            <van-swipe-item>
                <h2>话题榜</h2>
                <van-list>
                        <van-cell v-for="item,index in list1" :key="index">
                            {{index + 1}} {{item.first}}
                        </van-cell>
                </van-list>
            </van-swipe-item>
            <van-swipe-item>
                <h2>有声书榜</h2>
                <van-list>
                        <van-cell v-for="item,index in list1" :key="index">
                            {{index + 1}} {{item.first}}
                        </van-cell>
                </van-list>
            </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script setup lang="ts">
// 引入
import { ref } from 'vue'
import {RequestSearch,RequestSearchHot} from "@/api/search"
import router from '@/router';

// 跳转歌手列表
let toartistlist = ()=>{
    router.push({path:'/artistlist'})
}


// 测试热搜列表
const list1 = ref([
    {
        name: '情人',
        user: '蔡徐坤'
    },
    {
        name: '外婆家',
        user: '苏醒'
    },
    {
        name: '青城山下',
        user: 'KKECHO/REDBOI'
    }
])

// 回到首页
const backhome = ()=>{
    console.log(1);
    router.push({path:'/home'})
}

// 搜索调用      改为hash传参
let searchmusic = ref("")
const searchlist = async ()=>{
    router.push({path:'/search/seachlist/'+ searchmusic.value})
    // let res = await RequestSearch(searchmusic.value)

    // console.log(res.data.result.songs[0])
    // console.log(res.data.result.songs[6].name);
    // console.log(res.data.result.songs[6].artists);
}

// 热搜调用
const hotlist = async ()=>{
    let res = await RequestSearchHot()
    console.log(res.data.result.hots); //热搜列表
    console.log(res.data.result.hots[0].first);
    list1.value = res.data.result.hots
}
hotlist()



</script>

<style lang="scss" scoped>
.search{
    background-color: rgb(247, 247, 247);
    font-size: 0.5rem;
    padding-bottom: 2.5rem;
    .row1{
        background-color: white;
        margin-top: 20px;
        height: 0.7rem;
        line-height: 0.7rem;
        font-size: 0.5rem;
        input{
            width: 90%;
            height: 0.7rem;
            line-height: 0.7rem;
            border: none;
            border-radius: 0.7rem;
            background-color: rgb(247, 247, 247);
        }
    }
    .row2{
        background-color: white;
        text-align: center;
        font-size: 14px;
        padding: 20px 0;
    }
    .row3,.row4{
        padding: 10px;
        font-size: 14px;
    }
    .row3list,.row4list{
        margin: 0 10px 10px 10px;
        font-size: 12px;
        line-height: 20px;
        color: gray;
        
    }

    .my-swipe {
        font-size: 10px;
        .van-swipe-item{
            box-sizing: border-box;
            border-radius: 10px;
            // height: 16rem;
            padding: 0 10px;
            margin-right: 10px;
            background: white;
            h2{
                font-size: 14px;
                line-height: 30px;
                padding: 0 16px;
                margin: 5px 0;
                border-bottom: 1px solid #DEE1E6;
            }
        }
    }
    // .banner {
    // box-sizing: border-box;
    // margin: 20px;
    // border-radius: 10px;
    // overflow: hidden;

    // .my-swipe .van-swipe-item {
    //     height: 150px;
    //     // text-align: center;

    //     .van-image {
    //         width: 100%;
    //         height: 150px;
    //     }
    // }
// }
//     .my-swipe{
//         margin-top: 1rem;
//         .van-swipe-item {
//             margin-left: 0.3rem;
//             border-radius: 2rem;
//             font-size: 20px;
//             width: 80%;
//             height: 8rem;
//             background-color: white;
//             h2{
//                 font-size: 0.5rem;
//                 position: relative;
//                 left: 1rem;
//                 font-weight: bold;
//             }
//         }
//     } 
}
</style>